<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no" />
		<title>blog_details</title>
		<link rel="stylesheet" type="text/css" href="boot/dist/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/blog_details.css" />

		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.bundle.min.js"></script>
		<script src="js/popper.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.js"></script>
	</head>
	<body>
		<div class="header1">
			<div class="container">
				<div class="row">
					<div class="col-lg-2 col-12 text-center py-4 h_py">
						<a href="javascript:;">
							<img src="img/logo-header-06.png">
						</a>
					</div>
					<div class="col-lg-6 col-12 py-4 h_py1">
						<form class="h_col form-control border d-flex justify-content-between align-items-center rounded-pill" style=" height: 50px;">
							<!--2.2设置菜单项  nav-item 下拉菜单的区域 dropdown-->
							<span class="nav-item dropdown h_w">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link h_bor" data-toggle="dropdown">MOVIES<i class="fa fa-angle-down pl-2"></i></a>

								<!--2.设置下拉菜单-->
								<span class="dropdown-menu h_coll">
									<a href="#" class="dropdown-item">HOME</a>
									<a href="#" class="dropdown-item">VIDEOS</a>
									<a href="#" class="dropdown-item">FEATURES</a>
									<a href="#" class="dropdown-item">BLOG</a>
									<a href="#" class="dropdown-item">CONTACT</a>
								</span>

							</span>
							<input type="text" placeholder="Search for a Movie..." class="border-0 w-75 pl-4 h_input" style="outline: none;">
							<button type="" class="border-0 btn"><i class="fa fa-search h_btn"></i></button>
						</form>
					</div>
					<div class="col-lg-4 col-12 py-4 d-flex align-items-center h_ul">
						<ul class="list-unstyled mb-0 d-flex justify-content-around j align-items-center w-100">
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-facebook fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-twitter fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-vimeo fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-youtube-play fa_h"></i></a>
							</li>
							<a href="javascript:;" class="m_a rounded-pill">SUBMIT&nbsp;VIDEO</a>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="h_nav h-auto py-2">
			<!-- navbar-expand-md -->
			<div class="container d-flex justify-content-between align-items-center h_a">
				<div class="navbar p-0 navbar-expand-md h_center">
					<button type="button" class="btn navbar h_btnbg" data-toggle="collapse" data-target="#meu">
						<i class="fa fa-bars"></i>
					</button>
					<i class="border-right mx-3 h_hr" style="height: 30px;"></i>
					<div class="collapse navbar-collapse" id="meu">
						<ul class="nav list-unstyled d-flex text-center mx-auto justify-content-around justify-content-center navbar-nav h_bgg">
							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">MOME</a>
								<span class="nav-item dropdown float-left w-100">
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="index.html" class="dropdown-item">index</a>
									</span>
								</span>
							</li>

							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">MOVIE</a>
								<span class="nav-item dropdown float-left w-100 ">

									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="shop.html" class="dropdown-item">Shop</a>
										<a href="shop_details.html" class="dropdown-item">shop_details</a>
									</span>

								</span>
							</li>

							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">VIDEOS</a>
								<span class="nav-item dropdown float-left w-100">

									<!--2.设置下拉菜单-->
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="video.html" class="dropdown-item">Video</a>
										<a href="video_details.html" class="dropdown-item">video_details</a>
									</span>
								</span>
							</li>

							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">FEATURES</a>
								<span class="nav-item dropdown float-left w-100">

									<!--2.设置下拉菜单-->
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="about.html" class="dropdown-item">About</a>
										<a href="submit.html" class="dropdown-item">Submit</a>
										<a href="authors.html" class="dropdown-item">list_authors</a>
										<a href="authors_details.html" class="dropdown-item">authors_details</a>
									</span>
								</span>
							</li>

							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">BLOG</a>
								<span class="nav-item dropdown float-left w-100">

									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="blog.html" class="dropdown-item">Blog</a>
										<a href="blog_details.html" class="dropdown-item">blog_detail</a>

									</span>
								</span>
							</li>

							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">CONTACT</a>
								<span class="nav-item dropdown float-left w-100">

									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="contact.html" class="dropdown-item">CONTACT</a>
									</span>
								</span>
							</li>
						</ul>
					</div>

				</div>
				<!-- 两个图标 -->
				<div class="h_a">
					<a href="javascript:;">
						<i class="fa fa-cloud-upload"></i>
						<span>SUBMIT VIDED</span>
					</a>
					<i class="border-right mx-3"></i>
					<a href="javascript:;">
						<i class="fa fa-user"></i>
						<span>IOGIN</span>
					</a>
				</div>
			</div>
		</div>
		<!-- 顶部导航栏区域 -->
		<div style="background:url(img/bg-page-title-01.jpg)no-repeat; background-size: cover;" class="h_img">
			<div style="background-color: rgba(0,0,0,0.5); height:270px;">
				<!-- 文字区域 -->

				<p align="center" class="" style="padding-top: 100px; font-size: 35px; color: white;">Single Blog</p>
				<p align="center" class="text-white">Home / <span class="text-danger">Single Blog</span></p>

			</div>
		</div>

		<!-- 中部区域 -->
		<div class="bg-white py-5" id="mbg">
			<div class="container">
				<ul class="list-unstyled row">

					<li class="col-lg-9 col-12 py-5">
						<h4>UK Students Celebrate increase in Top A-Level Marks</h4>
						<!--  -->
						<ul class="list-unstyled d-flex flex-wrap">
							<li>
								<i class="fa fa-twitch" style="color: gray;"></i>
								<span style="color: gray;" class="pl-2">By&nbsp;Thomas&nbsp;Doe</span>
							</li>
							<li class="mx-3">
								<i class="fa fa-twitch" style="color: gray;"></i>
								<span style="color: gray;" class="pl-2">By&nbsp;Thomas&nbsp;Doe</span>
							</li>
							<li>
								<i class="fa fa-twitch" style="color: gray;"></i>
								<span style="color: gray;" class="pl-2">By&nbsp;Thomas&nbsp;Doe</span>
							</li>
						</ul>

						<!-- 大图片区域 -->
						<div class="overflow-hidden my-4 m_da">
							<img src="img/single-blog-01.jpg" class="w-100 m_daimg" />
							<p style="color: white; " class="m_size_o">08</p>
							<p style="color: white;" class="m_size_oo">AUG，2018</p>
						</div>

						<!-- 下半部分文字区域 -->
						<ul class="list-unstyled row">
							<li class="col-lg-2 col-12 py-3">
								<ul class="d-flex list-unstyled align-items-center flex-lg-column flex-row m_ulsize">
									<li>
										SHARE
									</li>
									<li>
										<a href="javascript:;" class="a_rounded"><i class="fa fa-facebook fa_h"></i></a>
									</li>
									<li>
										<a href="javascript:;" class="a_rounded"><i class="fa fa-twitter fa_h"></i></a>
									</li>
									<li>
										<a href="javascript:;" class="a_rounded"><i class="fa fa-youtube-play fa_h"></i></a>
									</li>
									<li>
										<a href="javascript:;" class="a_rounded"><i class="fa fa-vimeo fa_h"></i></a>
									</li>
								</ul>
							</li>
							<li class="col-lg-10 col-12 py-3">
								<!-- 文章区域 -->
								<p style="color: gray;">If you are a newbie to managing a WordPress website，then congratulatuations! You are
									here at the right track with us because we are going to introduce you one of the most basic knowledge when
									owning a WordPress page:how to find your site the best WordPress Hosting service.This process is often
									overlooked by most of the website owners.But it can be considered the most important key point to bring your
									site to stand out of the crowd.A great hosting service could help you to improve SEO and increase sales as
									well.</p>

								<p style="color: gray;">But first thing first，what is a hosting?Well，basically it si a space that contains all
									the data related to your website such as yoyr scurce codes，uploaed contents(images，sounds and other media) and
									your database.Imagine your site is a mixture of juices and a jar can be considered a hosting.</p>

								<ul class="row list-unstyled">
									<li class="col-1">
										<p align="center" style="color: red; font-size: 70px; font-weight: bold;">“</p>
									</li>
									<li class="col-11">
										<p style="font-size: 30px; line-height: 30px;">Neque porro quisquam est，qui dolorem ipsum quia dolor sit
											amet，consectetur，adipisci velit，sed quia non numquam eiustempora incidunt ut labore et dolore magnam aliquam</p>
									</li>
								</ul>

								<p style="color: gray;" class="py-3">If you are a newbie to managing a WordPress website，then
									congratulatuations! You are here at the right track with us because we are going to introduce you one of the
									most basic knowledge when owning a WordPress page:how to find your site the best WordPress Hosting
									service.This process is often overlooked by most of the website owners.But it can be considered the most
									important key point to bring your site to stand out of the crowd.A great hosting service could help you to
									improve SEO and increase sales as well.</p>

								<!-- 中图片区域 -->
								<ul class="list-unstyled row">
									<li class="col-1 m_none"></li>
									<li class="col-lg-10 col-12">
										<div class="overflow-hidden">
											<img src="img/content-blog-01.jpg" class="w-100 m_daimg" />
										</div>
									</li>
									<li class="col-1 m_none"></li>
								</ul>

								<!-- 文字区域 -->
								<p style="color: gray;" class="py-3">If you are a newbie to managing a WordPress website，then
									congratulatuations! You are here at the right track with us because we are going to introduce you one of the
									most basic knowledge when owning a WordPress page</p>

								<h5 class="py-2">TAGS:<span class="pl-3 font-weight-normal" style="color: red;">film maker， film studio</span></h5>

								<!-- 人物评论区域 -->
								<div class="py-2 border">
									<ul class="list-unstyled row">
										<li class="col-lg-4 col-12 py-5">
											<p align="center"><img src="img/ava-01.jpg" class=""></p>
											<p align="center">
												<ul class="list-unstyled mb-0 d-flex justify-content-around j align-items-center mx-auto" style="width: 70%;">
													<li>
														<a href="javascript:;" class="a_rounded"><i class="fa fa-facebook fa_h"></i></a>
													</li>
													<li>
														<a href="javascript:;" class="a_rounded"><i class="fa fa-twitter fa_h"></i></a>
													</li>
													<li>
														<a href="javascript:;" class="a_rounded"><i class="fa fa-vimeo fa_h"></i></a>
													</li>

												</ul>
											</p>
										</li>
										<li class="col-lg-8 col-12 py-5">
											<h5>Michael Mikado</h5>
											<p style="color: gray;" class="mb-0">Front-end dev</p>
											<!-- 文字区域 -->
											<p style="color: gray;" class="py-3">If you are a newbie to managing a WordPress website，then
												congratulatuations! You are here at the right track with us because we are going to introduce you one of
												the
												most basic knowledge when owning a WordPress page:how to find your site</p>
										</li>
									</ul>
								</div>

								<!-- 两个按钮 -->
								<ul class="list-unstyled row py-3 m-0">
									<li class="col-lg-6 col-12 py-5 border">
										<div class="row">
											<div class="col-3 ">
												<a href="javascript:;" class="a_roundedl"><i class="fa fa-arrow-left fa_hl"></i></a>
											</div>
											<div class="col-9">
												<h5 style="color: red;" class="text-right">PRWVIOUS</h5>
												<h5 class="text-right">Exploring the New Youk</h5>
												<p class="text-right" style="color: gray;">October 15，2018</p>
											</div>
										</div>
									</li>
									<li class="col-lg-6 col-12 py-5 border">
										<div class="row">
											<div class="col-9">
												<h5 style="color: red;" class="text-left">PRWVIOUS</h5>
												<h5 class="text-left">Exploring the New Youk</h5>
												<p class="text-left" style="color: gray;">October 15，2018</p>
											</div>
											<div class="col-3 ">
												<a href="javascript:;" class="a_roundedl"><i class="fa fa-arrow-right fa_hl"></i></a>
											</div>
										</div>
									</li>
								</ul>

								<!-- 下方评论区域 -->
								<h5 class="pt-5">2 COMMENTS</h5>
								<!--  -->
								<hr style="color: gray;" class="py-3" />

								<ul class="list-unstyled row">
									<li class="col-lg-2 col-12">
										<img src="img/ava-01.jpg" />
									</li>
									<li class="col-lg-10 col-12">
										<div class="d-flex justify-content-between">
											<span>Edugate</span>
											<span><a href="javascript:;" style="color: red; text-decoration: underline;">Roply</a></span>
										</div>
										<p style="color: gray;">November 11，2016 at 9:10 AM</p>
										<p style="color: gray;">So far，the conversion increase is more due to plain force，but the quality of boss
											conversions and subsequent leads can be increased</p>
									</li>
								</ul>

								<!-- 线 -->
								<p style="border-top: 2px gray dashed;" class="my-5"></p>

								<!--  -->
								<ul class="list-unstyled row">
									<li class="col-lg-2 col-12">

									</li>
									<li class="col-lg-2 col-12">
										<img src="img/ava-01.jpg" />
									</li>
									<li class="col-lg-8 col-12">
										<div class="d-flex justify-content-between">
											<span>Edugate</span>
											<span><a href="javascript:;" style="color: red; text-decoration: underline;">Roply</a></span>
										</div>
										<p style="color: gray;">November 11，2016 at 9:10 AM</p>
										<p style="color: gray;">So far，the conversion increase is more due to plain force，but the quality of boss
											conversions and subsequent leads can be increased</p>
									</li>
								</ul>

								<!-- 评论 -->
								<h5 class="py-4">LEAVE A COMMENT</h5>

								<hr style="color: gray;" class="py-3" />

								<!--  -->
								<p style="color: gray; font-size: 20px;">Your email address will not be published.Required fields are marked*</p>

								<ul class="list-unstyled row">
									<li class="col-lg-6 col-12 py-3">
										<input type="text" placeholder="Your Name*" class="pl-2 w-100 py-2" style="outline: none; color: gray;" />
									</li>
									<li class="col-lg-6 col-12 py-3">
										<input type="text" placeholder="Email*" class="pl-2 w-100 py-2" style="outline: none; color: gray;" />
									</li>

									<li class="col-12 py-3">
										<textarea rows="8" class="w-100 pl-2" placeholder="Enter your comment*" style="outline: none;"></textarea>
									</li>
									<li class="col-12 mb-5">
										<a href="javascript:;" class="m_a rounded-pill">SUBMIT&nbsp;COMMENT</a>
									</li>
								</ul>

								<!-- 轮播图区域 -->
								<div id="app">

									<div class=" d-flex justify-content-between flex-lg-row flex-column">
										<h4>You May Also Like</h4>

										<p>
											<button type="button" class="btn fa fa-angle-left videio_b" @click="typepaven"></button>
											<button type="button" class="btn fa fa-angle-right videio_b" @click="typeone"></button>
										</p>


									</div>
									<hr style="color: gray;" class="" />

									<template v-if="type==1">
										<div class="row">
											<div class="col-lg-4 col-12  py-4">
												<div class="divv overflow-hidden">
													<img src="img/post-01.jpg" height="350" class="w-100 m_img_xiao" />
													<img src="img/star-01.png" class="x">
													<span class="text-white wu">5</span>
													<h5 class="h text-white">IMDb</h5>
													<span class="aa text-white">Hot</span>
													<div class="m_img_bg_col"></div>
													<img src="img/icon-play-01.png" class="m_img_bo">
												</div>
												<h5 class="text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>

											</div>
											<div class="col-lg-4 col-12  py-4">
												<div class="divv overflow-hidden">
													<img src="img/post-02.jpg" height="350" class="w-100 m_img_xiao" />
													<img src="img/star-01.png" class="x">
													<span class="text-white wu">5</span>
													<h5 class="h text-white">IMDb</h5>
													<span class="aa text-white">Hot</span>
													<div class="m_img_bg_col"></div>
													<img src="img/icon-play-01.png" class="m_img_bo">
												</div>
												<h5 class="text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											</div>
											<div class="col-lg-4 col-12  py-4">
												<div class="divv overflow-hidden">
													<img src="img/post-03.jpg" height="350" class="w-100 m_img_xiao" />
													<img src="img/star-01.png" class="x">
													<span class="text-white wu">5</span>
													<h5 class="h text-white">IMDb</h5>
													<span class="aa text-white">Hot</span>
													<div class="m_img_bg_col"></div>
													<img src="img/icon-play-01.png" class="m_img_bo">
												</div>
												<h5 class="text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											</div>
											<!-- <div class="col-lg-3 col-md-6 col-12  py-4">
												<div class="m_img_bg">
													<img src="img/post-04.jpg" class="w-100 m_img_fu" />
													<img src="img/star-01.png" class="m_img_tu">
													<span class="text-white m_size_1">5</span>
													<h5 class="m_img_h1 text-white">IMDb</h5>
													<span class="m_img_p1 text-white">HDRip</span>
													<div class="m_img_bg_col"></div>
													<img src="img/icon-play-01.png" class="m_img_bo">
												</div>
												
											</div> -->
										</div>
									</template>
									<template v-if="type==2">
										<div class="row">
											<div class="col-lg-4 col-12  py-4">
												<div class="divv overflow-hidden">
													<img src="img/post-05.jpg" height="350" class="w-100 m_img_xiao" />
													<img src="img/star-01.png" class="x">
													<span class="text-white wu">5</span>
													<h5 class="h text-white">IMDb</h5>
													<span class="aa text-white">Hot</span>
													<div class="m_img_bg_col"></div>
													<img src="img/icon-play-01.png" class="m_img_bo">
												</div>
												<h5 class="text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											</div>
											<div class="col-lg-4 col-12  py-4">
												<div class="divv overflow-hidden">
													<img src="img/post-06.jpg" height="350" class="w-100 m_img_xiao" />
													<img src="img/star-01.png" class="x">
													<span class="text-white wu">5</span>
													<h5 class="h text-white">IMDb</h5>
													<span class="aa text-white">Hot</span>
													<div class="m_img_bg_col"></div>
													<img src="img/icon-play-01.png" class="m_img_bo">
												</div>
												<h5 class="text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											</div>
											<div class="col-lg-4 col-12  py-4">
												<div class="divv overflow-hidden">
													<img src="img/post-07.jpg" height="350" class="w-100 m_img_xiao" />
													<img src="img/star-01.png" class="x">
													<span class="text-white wu">5</span>
													<h5 class="h text-white">IMDb</h5>
													<span class="aa text-white">Hot</span>
													<div class="m_img_bg_col"></div>
													<img src="img/icon-play-01.png" class="m_img_bo">
												</div>
												<h5 class="text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											</div>
											<!-- <div class="col-lg-3 col-md-6 col-12  py-4">
												<div class="m_img_bg">
													<img src="img/post-08.jpg" class="w-100 m_img_fu" height="370" />
													<img src="img/star-01.png" class="m_img_tu">
													<span class="text-white m_size_1">5</span>
													<h5 class="m_img_h1 text-white">IMDb</h5>
													<span class="m_img_p1 text-white">HDRip</span>
													<div class="m_img_bg_col"></div>
													<img src="img/icon-play-01.png" class="m_img_bo">
												</div>
												
											</div> -->
										</div>
									</template>
									<template v-if="type==3">
										<div class="row">
											<div class="col-lg-4 col-12  py-4">
												<div class="divv overflow-hidden">
													<img src="img/post-09.jpg" height="350" class="w-100 m_img_xiao" />
													<img src="img/star-01.png" class="x">
													<span class="text-white wu">5</span>
													<h5 class="h text-white">IMDb</h5>
													<span class="aa text-white">Hot</span>
													<div class="m_img_bg_col"></div>
													<img src="img/icon-play-01.png" class="m_img_bo">
												</div>
												<h5 class="text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											</div>
											<div class="col-lg-4 col-12  py-4">
												<div class="divv overflow-hidden">
													<img src="img/post-10.jpg" height="350" class="w-100 m_img_xiao" />
													<img src="img/star-01.png" class="x">
													<span class="text-white wu">5</span>
													<h5 class="h text-white">IMDb</h5>
													<span class="aa text-white">Hot</span>
													<div class="m_img_bg_col"></div>
													<img src="img/icon-play-01.png" class="m_img_bo">
												</div>
												<h5 class="text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											</div>
											<div class="col-lg-4 col-12  py-4">
												<div class="divv overflow-hidden">
													<img src="img/post-11.jpg" height="350" class="w-100 m_img_xiao" />
													<img src="img/star-01.png" class="x">
													<span class="text-white wu">5</span>
													<h5 class="h text-white">IMDb</h5>
													<span class="aa text-white">Hot</span>
													<div class="m_img_bg_col"></div>
													<img src="img/icon-play-01.png" class="m_img_bo">
												</div>
												<h5 class="text-center pt-3 mb-0">How To Wake a Pimple Disappear With Makeup</h5>
											</div>
											<!-- <div class="col-lg-3 col-md-6 col-12  py-4">
												<div class="m_img_bg">
													<img src="img/post-12.jpg" class="w-100 m_img_fu" height="370" />
													<img src="img/star-01.png" class="m_img_tu">
													<span class="text-white m_size_1">5</span>
													<h5 class="m_img_h1 text-white">IMDb</h5>
													<span class="m_img_p1 text-white">HDRip</span>
													<div class="m_img_bg_col"></div>
													<img src="img/icon-play-01.png" class="m_img_bo">
												</div>
												
											</div> -->
										</div>
									</template>
								</div>
							</li>
						</ul>
					</li>

					<li class="col-lg-3 col-12 py-5 m_borr">
						<!-- 搜索框 -->
						<div class="pb-3">
							<form class="w-100 border-right-0 border-top-0 border-left-0 border-bottom d-flex justify-content-between" style=" height: 50px;">
								<input type="text" placeholder="What are you looking for?" class="border-0 pl-2 w-100" style="outline: none;">
								<button type="" class="border-0 btn text-muted" style="background-color: white;"><i class="fa fa-search"></i></button>
							</form>
						</div>

						<!-- 文字区域 -->
						<h5 style="color: black;">CATEGORIES</h5>
						<ul class="list-unstyled py-3">
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Film maker</span>
								<span style="color: gray;">32</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Film studio</span>
								<span style="color: gray;">32</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Life style</span>
								<span style="color: gray;">16</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Fashion</span>
								<span style="color: gray;">08</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Film online</span>
								<span style="color: gray;">45</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Film studio</span>
								<span style="color: gray;">32</span>
							</li>

						</ul>

						<h5 style="color: black;">MOST POPULAR</h5>
						<!-- 三张小图片区域 -->
						<ul class="list-unstyled  py-3 row">
							<li class="col-5 py-3">
								<div class="overflow-hidden ">
									<img src="img/post-53.jpg" class="w-100 m_img_xiao">
								</div>
							</li>
							<li class="col-7 py-3">
								<p style="font-size: 15px; color: gray;" class="py-2 mb-0">Mirum est notare quam littera...</p>
								<p><span style="color: gray; text-decoration: line-through;">￡9.00</span><span style="color: red;">￡7.00</span></p>
							</li>
							<li class="col-5 py-3">
								<div class="overflow-hidden ">
									<img src="img/post-54.jpg" class="w-100 m_img_xiao">
								</div>
							</li>
							<li class="col-7 py-3">
								<p style="font-size: 15px; color: gray;" class="py-2 mb-0">Mirum est notare quam littera...</p>
								<p><span style="color: gray; text-decoration: line-through;">￡9.00</span><span style="color: red;">￡7.00</span></p>
							</li>
							<li class="col-5 py-3">
								<div class="overflow-hidden ">
									<img src="img/post-55.jpg" class="w-100 m_img_xiao">
								</div>
							</li>
							<li class="col-7 py-3">
								<p style="font-size: 15px; color: gray;" class="py-2 mb-0">Mirum est notare quam littera...</p>
								<p><span style="color: gray; text-decoration: line-through;">￡9.00</span><span style="color: red;">￡7.00</span></p>
							</li>
						</ul>

						<!--  -->
						<h5 style="color: black;">TAGS CLOUD</h5>
						<ul class="list-unstyled py-3 d-flex flex-wrap">
							<li class="py-2 px-2">
								<button type="button" class="bg-white border px-3" style="color: gray;">Film Oline</button>
							</li>
							<li class="py-2 px-2">
								<button type="button" class="bg-white border px-3" style="color: gray;">Greative</button>
							</li>
							<li class="py-2 px-2">
								<button type="button" class="bg-white border px-3" style="color: gray;">Design</button>
							</li>
							<li class="py-2 px-2">
								<button type="button" class="bg-white border px-3" style="color: gray;">Landing</button>
							</li>
							<li class="py-2 px-2">
								<button type="button" class="bg-white border px-3" style="color: gray;">Skill</button>
							</li>
						</ul>

						<!-- img -->
						<img src="./img/ads-04.jpg" class="w-100 position-sticky sticky-top" />
					</li>
				</ul>
			</div>
		</div>

		<!-- 底部区域 -->
		<div class="py-5 " style="background-color : #000000;">
			<div class="container">
				<div class="row">
					<div class="col-lg-5 col-12 py-5 text-center f_padd">
						<p align="center">
							<a href="javascript:;"><img src="./img/logo-header-05.png" class=""></a>
						</p>
						<p align="center" class="py-3" style="color: gray;">Lommode ligula eget dolor. Aenean meassa.Cum sociis que
							penatibus et
							magnis dis parturient montes lorenm，nascetur ridiculusmus. Donec quam felis， uitricies nex massa.Cum sociis...</p>
						<!-- 按钮组 -->

						<div class="btn-group pt-3" style="width: 85%;">
							<input type="text" placeholder="Email" style="width: 70%; background-color: #222222; border: 1px solid gray; color: gray; outline: none;">
							<button class="btn text-white font-weight-bold" style="background-color: red;">SUBSCRIBE</button>
						</div>
						<!-- 图标区域 -->
						<ul class="list-unstyled mb-0 d-flex justify-content-around j align-items-center mx-auto py-5" style="width: 70%;">
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-facebook fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-twitter fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-vimeo fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-youtube-play fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-google-plus fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-file-movie-o fa_h"></i></a>
							</li>
						</ul>
					</div>
					<div class="col-lg-4 col-12 py-5 f_padd_2">
						<div class="row">
							<div class="col-12">
								<h5 class="text-white">LATEST POSTS</h5>
							</div>
						</div>
						<div class="row">
							<div class="col-4 py-3">
								<div class="overflow-hidden">
									<img src="img/png-post-01.png" class="w-100 m_img_xiao">
								</div>
							</div>
							<div class="col-8 py-3">
								<p class="text-white mb-0" style="line-height: 22px;">5 Skin Care Rituals You Should Be Doing Before Bed</p>
								<p style="color: gray;">August 11，2018</p>
							</div>
						</div>
						<div class="row">
							<div class="col-4  py-3">
								<div class="overflow-hidden">
									<img src="img/png-post-02.png" class="w-100 m_img_xiao">
								</div>
							</div>
							<div class="col-8 py-3">
								<p class="text-white mb-0" style="line-height: 22px;">Fashion Outfit Ideas to Try From lnstagram This Week</p>
								<p style="color: gray;">August 11，2018</p>
							</div>
						</div>
						<div class="row">
							<div class="col-4 py-3">
								<div class="overflow-hidden">
									<img src="img/png-post-03.png" class="w-100 m_img_xiao">
								</div>
							</div>
							<div class="col-8 py-3">
								<p class="text-white mb-0" style="line-height: 22px;">7 Soaps to Supercharge Your Daily Skincare Routine</p>
								<p style="color: gray;">August 11，2018</p>
							</div>
						</div>
					</div>
					<div class="col-lg-3 col-12 py-5 f_padd_3">
						<h5 class="text-white">POPULAR CATEGORY</h5>
						<ul class="list-unstyled py-3">
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Fragrances</span>
								<span class="text-white">15</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Hair Care</span>
								<span class="text-white">12</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Make Up</span>
								<span class="text-white">6</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Outfits</span>
								<span class="text-white">9</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Skin Care</span>
								<span class="text-white">10</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Style</span>
								<span class="text-white">8</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Fashion</span>
								<span class="text-white">5</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Lifestyle</span>
								<span class="text-white">2</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Weliness</span>
								<span class="text-white">3</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="py-4 border-top text-center" style="border-color: gray !important; background-color: #000000;">
			<p style="color: gray;" class="mb-0">Copyright 2018 Carporate WordPress Theme Theme by <span><a href="javascript:;"
					 style="color: red; text-decoration: none;">ThimPress</a></span></p>
		</div>
		<!--  -->
		<div class="back">返回顶部</div>
	</body>
</html>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(function() {
		$(document).scrollTop();
		//1.被卷去的头部
		var boxTop = $('#mbg').offset().top;
		$(window).scroll(function() {
			// console.log(11);
			console.log($(document).scrollTop());

			if ($(document).scrollTop() >= boxTop) {
				$('.back').fadeIn();
			} else {
				$('.back').fadeOut();
			}
		})

		//返回顶部
		$('.back').click(function() {
			// $(document).scrollTop(0);
			$('body,html').stop().animate({
				scrollTop: 0
			})
		})
	})
</script>
